<template>
    <div class="business-list">
        <van-card
                :title="business.name"
                :desc="`月销售${business.monthSales}+份`"
                :thumb="business.mainImage"
        />
        <van-tabbar v-model="active" route >
            <van-tabbar-item :class="{'van-tabbar-item--active': active == 0}" :to="`/business/detail/foods?id=${$route.query.id}`" icon="home-o">点菜</van-tabbar-item>
            <van-tabbar-item :class="{'van-tabbar-item--active': active == 1}" :to="`/business/detail/info?id=${$route.query.id}`" icon="search">商家</van-tabbar-item>
        </van-tabbar>
        <router-view v-slot="{ Component }" :business="business">
            <!--路由缓存-->
            <keep-alive>
                <component :is="Component"/>
            </keep-alive>
        </router-view>
    </div>
</template>
<script>
import axios from "axios";

export default {
    name: "detail",
    data(){
        return{
            active:'',
            id:'',
            business:{}
        }
    },
    methods:{
      _initBusiness(){
        axios.get(`/ele_server/business/getById?id=${this.id}`).then(({data:res})=>{
           if (res.status == 0){
             this.business = res.data;
           }else {
             alert(res.message)
           }
        })
      }
    },
    created() {
       this.id = this.$route.query.id;
       this._initBusiness()
    }
}
</script>

<style scoped lang="stylus">
 .van-tabbar--fixed
  position relative
  left 0
</style>